<template>
  <el-card>
    <el-table :data="skuList">
      <el-table-column
        label="序号"
        type="index"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column
        label="名称"
        prop="skuName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="描述"
        prop="skuDesc"
        align="center"
      ></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.skuDefaultImg"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="重量"
        prop="weight"
        align="center"
      ></el-table-column>
      <el-table-column
        label="价格"
        prop="price"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="260px">
        <template v-slot='{row}'>
          <el-tooltip
            v-if="row.isSale==0"
            class="box-item"
            effect="dark"
            content="上架"
            placement="top"
          >
            <el-button @click="toOnSale(row)" type="info" :icon="Top" size="small"></el-button>
          </el-tooltip>
          <el-tooltip
            v-else
            class="box-item"
            effect="dark"
            content="下架"
            placement="top"
          >
            <el-button @click="toCancelSale(row)" type="success" :icon="Bottom" size="small"></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="top"
          >
            <el-button type="primary" :icon="Edit" size="small"></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="查看"
            placement="top"
          >
            <el-button @click="toCheckSale(row)" type="info" :icon="InfoFilled" size="small"></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="删除"
            placement="top"
          >
            <el-button @click="toDeleteSale(row)" type="danger" :icon="Delete" size="small"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  <!-- 分页器 -->
    <el-pagination style="margin-top:10px" 
    v-model:currentPage="currentPage" 
    v-model:page-size="pageSize" 
    :page-sizes="[7, 15, 20, 30]" 
    :small="small" :disabled="disabled" 
    :background="background" 
    layout="prev, pager, next, jumper,->,sizes,total " 
    :total="total" 
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange" />
    <!-- 抽屉效果 -->
    <el-drawer v-model="drawer" title="I am the title" :direction="direction" size="45%" :before-close="handleClose">
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>名称</h4>
        </el-col>
        <el-col :span="17">
          <p>{{skuInfo.skuName}}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>描述</h4>
        </el-col>
        <el-col :span="17">
          <p>{{skuInfo.skuDesc}}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>价格</h4>
        </el-col>
        <el-col :span="17">
          <p>{{skuInfo.price}}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>平台属性</h4>
        </el-col>
        <el-col :span="17">
          <el-tag v-for="skuAttrValue in skuInfo.skuAttrValueList" :key="skuAttrValue.id">{{skuAttrValue.attrName+'-'+skuAttrValue.valueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>销售属性</h4>
        </el-col>
        <el-col :span="17">
          <el-tag v-for="saleAttr in skuInfo.skuSaleAttrValueList" :key="saleAttr.id">{{saleAttr.saleAttrName+'-'+saleAttr.saleAttrValueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>商品图片</h4>
        </el-col>
        <el-col :span="17">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <el-image :src="item.imgUrl" style="width:100%"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "sku",
};
</script>
<script lang="ts" setup>
import { reqDeleteSkuInfo, reqGetAllSkuList, reqGetOneSkuInfo, reqSkuInfoCancelSale, reqSkuInfoOnSale } from "@/api/product/sku";
import { onMounted, ref } from "@vue/runtime-core";
import { Top, Bottom, Delete, Edit, InfoFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
// 定义sku列表
const skuList = ref([]);
const skuInfo = ref({});
const drawer = ref(false)
// 根据页码获取当前的数据
const currentPage = ref(1);
const pageSize = ref(7);
const total = ref(0);
const getAllSkuList = async () => {
  const result = await reqGetAllSkuList(currentPage.value, pageSize.value);
  skuList.value = result.records;
};
// 页面挂载获取数据
onMounted(() => {
  getAllSkuList();
});
// 分页器相关事件  每页显示最多条
const handleSizeChange = (val: number) => {
  pageSize.value=val
  // console.log(`${val} items per page`)
  getAllSkuList()
}
// 改变页码
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  currentPage.value=val
  getAllSkuList()
}
// 上传上架事件
const toOnSale=async(row)=>{
  console.log('上传')
  await reqSkuInfoOnSale(row.id)
  ElMessage.success('商品上架成功...')
  // 不发送求情，改变该项状态
  row.isSale = 1-row.isSale
}

// 下架事件
const toCancelSale=async(row)=>{
  await reqSkuInfoCancelSale(row.id)
  ElMessage.success('商品下架成功...')
  // 不发送求情，改变该项状态
  row.isSale = 1-row.isSale

}
const toCheckSale = async(row)=>{
  drawer.value = true;

  skuInfo.value = await reqGetOneSkuInfo(row.id)
}

const toDeleteSale= async(row)=>{
  await reqDeleteSkuInfo(row.id)
}
</script>

<style></style>
